<template>
  <div class="announcementContainer">
    <el-card>
      <!-- form表单 -->
      <el-form :model="announcementForm" label-width="80px">
        <el-form-item label="发布时间">
          <el-date-picker
            v-model="announcementForm.announceTime"
            type="datetime"
            placeholder="选择日期时间"
            class="timeForAnnounce"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input
            type="textarea"
            :rows="20"
            placeholder="请输入公告内容"
            v-model="announcementForm.announceContent"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="confirm"
            >确认发布</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Announcement",
  data() {
    return {
      announcementForm: {
        announceId: "",
        announceTime: "",
        announceContent: "",
      },
    };
  },
  methods: {
    // 点击确认按钮
    confirm() {
      this.$confirm("发布公告后将不可修改或者删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(this.announcementForm);
          const {data : res} = await axios({
            method:'POST',
            url:'/api/announcement/submit',
            data: this.announcementForm
          })
          if (res.code == 200) {
            this.$message.success("公告发布成功");
            // 发布成功清空内容
            this.announcementForm = {};
          }else {
            this.$message.error("服务器错误，请稍后重试！");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消",
          });
        });
    },
  },
};
</script>

<style>
/* 公共样式修改 */
.announcementContainer {
  height: 100%;
  padding: 50px;
}
.announcementContainer .el-card {
  margin-top: 0px;
  margin-right: 0px;
}
/* 处理时间框大小 */
.announcementContainer .timeForAnnounce .el-input__inner {
  border-radius: 5px;
  height: 40px !important;
}
/* 修改时间框宽度 */
.announcementContainer .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
/* 文本域 */
.announcementContainer .el-textarea__inner:focus {
  border-color: #ff84b4;
}
/* 按钮布局 */
.announcementContainer .el-form-item__content {
  text-align: end;
}
</style>